<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--    在cpn中输入，就决定插条的内容-->
    <cpn>
        <button>案例</button>
    </cpn>
    <cpn><p>123</p></cpn>
    <cpn><h2>666</h2></cpn>
    <cpn></cpn>
    <cpn>
        <!--        如果有多个值放组件中，会一起替换-->
        <div>我是div</div>
        <p>我是P</p>
        <i>我是I</i>
    </cpn>

</div>

<template id="cpn">
    <div>
        <h2>我是组件</h2>
        <p>我是组件嘻嘻</p>
        <!--        //插条，增加扩展性 -->
        <!--        你插条里面可以放默认值-->
        <slot>
            <button>牛逼666</button>
        </slot>
    </div>
</template>


<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '卢本伟牛逼！'
        },
        components: {
            cpn: {
                template: '#cpn'
            }
        }
    })
</script>
</body>
</html>
